<template>
  <div class="recruit-modal-demo">
    <h1>RecruitModal 组件样式调试页面</h1>
    <button @click="openModal" class="open-modal-btn">打开招募模态框</button>
    
    <!-- 引入 RecruitModal 组件 -->
    <RecruitModal
      :show="isModalOpen"
      :order="orderInfo"
      :mock-data="mockCandidates"
      @close="closeModal"
    />
  </div>
</template>

<script>
// 导入 RecruitModal 组件
import RecruitModal from '@/components/common/RecruitModal.vue';

export default {
  components: {
    RecruitModal
  },
  data() {
    return {
      isModalOpen: false,
      // 模拟订单信息
      orderInfo: {
        task_id: 1001,
        title: '软件工程师',
        salary: '1500-2000元/天',
        location: '北京市朝阳区'
      },
      // 模拟候选人数据（用于样式调试）
      mockCandidates: [
        {
          candidate_id: 1,
          avatar: 'https://via.placeholder.com/100',
          name: '张三是打包',
          isRealName: true,
          matchRate: '95%',
          gender: '男',
          age: 28,
          height: 175,
          reputation: '100',
          goodRate: '98%',
          selfDesc: '5年前端开发经验，精通Vue、React等框架，有多个大型项目经验。',
          images: [
            'https://via.placeholder.com/200x150?text=项目1',
            'https://via.placeholder.com/200x150?text=项目2',
            'https://via.placeholder.com/200x150?text=项目3'
          ],
          mainJob: '资深前端工程师',
          skills: [
            { name: 'Vue', selected: true },
            { name: 'React', selected: true },
            { name: 'TypeScript', selected: false },
            { name: 'Webpack', selected: true },
            { name: 'Node.js', selected: false }
          ],
          specializes_cuisine: '前端架构设计、性能优化',
          selected: false
        },
        {
          candidate_id: 2,
          avatar: 'https://via.placeholder.com/100',
          name: '李四',
          isRealName: true,
          matchRate: '88%',
          gender: '女',
          age: 26,
          height: 165,
          reputation: '优秀',
          goodRate: '99%',
          selfDesc: '3年UI/UX设计经验，擅长Figma、Sketch等工具，注重用户体验。',
          images: [
            'https://via.placeholder.com/200x150?text=设计1',
            'https://via.placeholder.com/200x150?text=设计2'
          ],
          mainJob: 'UI/UX设计师',
          skills: [
            { name: 'Figma', selected: true },
            { name: 'Sketch', selected: true },
            { name: 'Adobe XD', selected: false },
            { name: '原型设计', selected: true },
            { name: '用户研究', selected: true }
          ],
          specializes_cuisine: '交互设计、视觉设计',
          selected: true
        },
        {
          candidate_id: 3,
          avatar: 'https://via.placeholder.com/100',
          name: '王五',
          isRealName: false,
          matchRate: '75%',
          gender: '男',
          age: 30,
          height: 180,
          reputation: '良好',
          goodRate: '92%',
          selfDesc: '7年后端开发经验，精通Java、Spring Boot等技术，擅长高并发系统设计。',
          images: [],
          mainJob: '后端技术专家',
          skills: [
            { name: 'Java', selected: true },
            { name: 'Spring Boot', selected: true },
            { name: 'MySQL', selected: true },
            { name: 'Redis', selected: false },
            { name: '微服务', selected: true }
          ],
          specializes_cuisine: '系统架构、性能优化',
          selected: false
        }
      ]
    };
  },
  methods: {
    openModal() {
      this.isModalOpen = true;
    },
    closeModal() {
      this.isModalOpen = false;
    }
  }
};
</script>

<style scoped>
.recruit-modal-demo {
  padding: 20px;
  text-align: center;
}

h1 {
  font-size: 24px;
  margin-bottom: 30px;
  color: #333;
}

.open-modal-btn {
  padding: 10px 20px;
  background-color: #007aff;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
}

.open-modal-btn:hover {
  background-color: #0062cc;
}
</style>